<script setup lang="ts">
import TableView from '@/components/TableView.vue'
import { NDataTable, NPagination, useMessage, type DataTableColumns, NScrollbar } from 'naive-ui'
import { ref, reactive, watch } from 'vue'
import { useRoute } from 'vue-router'
import { sendRequest } from '@/utils/api'
import type { HttpResponsePagination } from '@/utils/http'
import type { carlistModel } from '@/api/office'
import { useViewerStore } from '../Common/store'

const message = useMessage()
const route = useRoute()
const useStore = useViewerStore()

//表格
const columns: DataTableColumns = [
  {
    title: '员工编号',
    key: 'userCode',
    width: '50rem',
    align: useStore.isCenter
  },
  {
    title: '姓名',
    key: 'userName',
    width: '50rem',
    align: useStore.isCenter
  },
  {
    title: '职位',
    key: 'userPosition',
    width: '50rem',
    align: useStore.isCenter,
    ellipsis: {
      tooltip: {
        contentStyle: {
          maxWidth: '500rem'
        }
      }
    }
  },
  {
    title: '手机号',
    key: 'userPhone',
    width: '50rem',
    align: useStore.isCenter
  },
  {
    title: '车牌号',
    key: 'userCarNumber',
    width: '50rem',
    align: useStore.isCenter
  },
  {
    title: '邮箱',
    key: 'userEmail',
    width: '50rem',
    align: useStore.isCenter
  }
]
const dataList: any = ref()
const dataIndex: any = ref()
const paginationReactive = reactive({
  page: 1,
  pageSize: 10,
  showSizePicker: true,
  pageSizes: [10, 20, 50, 100, 500],
  itemCount: 0,
  onChange: (page: number) => {
    paginationReactive.page = page
    queryTableData()
  },
  onUpdatePageSize: (pageSize: number) => {
    paginationReactive.pageSize = pageSize
    paginationReactive.page = 1
    queryTableData(true)
  }
})
const queryListData = async () => {
  const [error, res] = await sendRequest({
    module: 'workBench',
    api: 'getInsList'
  })
  if (error) return message.error(error.message)
  if (res.code !== 0) return message.error(res.msg)
  dataList.value = res.data
  dataIndex.value = res.data[0]?.key
  queryTableData()
}
//表格数据
const tableLoading = ref(false)
const tableData: any = ref([])
const queryTableData = async (resetPage = false) => {
  if (resetPage) paginationReactive.page = 1
  tableLoading.value = true
  const [error, res] = await sendRequest<HttpResponsePagination<carlistModel[]>>({
    module: 'workBench',
    api: 'getUsersByInsIdList',
    override: {
      params: {
        id: dataIndex.value,
        page: paginationReactive.page,
        limit: paginationReactive.pageSize
      }
    }
  })
  tableLoading.value = false
  if (error) return message.error(error.message)
  if (res.code !== 0) return message.error(res.msg)
  const tmp: any = res.data
  tableData.value = tmp?.list
  paginationReactive.itemCount = tmp?.totalCount
}
watch(
  () => route.path,
  () => {
    if (route.path == '/OA/Workbench/MailFill') queryListData()
  },
  { deep: true, immediate: true }
)
</script>

<template>
  <TableView style="padding: 29rem 30rem 42rem">
    <template #table>
      <div style="display: flex; height: 100%">
        <div style="
            width: 490rem;
            padding: 49rem 30rem 42rem;
            background-color: #f8f8f8;
            margin-right: 20rem;
            overflow: hidden;
          ">
          <NScrollbar>
            <div v-for="i in dataList" :key="i?.key" :class="dataIndex == i.key ? 'Choice' : 'noChoice'" @click="() => {
              dataIndex = i.key
              queryTableData()
            }
              ">
              {{ i.value }}
            </div>
          </NScrollbar>
        </div>
        <TableView class="table">
          <template #table="props">
            <NDataTable v-bind="props" :bordered="false" :columns="columns" :data="tableData" :scroll-x="800"
              :loading="tableLoading" />
          </template>

          <template #pagination>
            <NPagination show-size-picker show-quick-jumper :page-sizes="paginationReactive.pageSizes"
              :item-count="paginationReactive.itemCount" :page="paginationReactive.page"
              :page-size="paginationReactive.pageSize" @update:page="paginationReactive.onChange"
              @update:page-size="paginationReactive.onUpdatePageSize" :suffix="() => '页'">
              <template #prefix>
                <span style="font-size: 14px;"> 共{{ paginationReactive.itemCount }}条</span>
              </template>
            </NPagination>
          </template>
        </TableView>
      </div>
    </template>
  </TableView>
</template>

<style scoped lang="scss">
.table {
  height: 100%;
  width: calc(100% - 490rem);
}

.Choice {
  background-color: #e1e1e1;
  cursor: pointer;
  font-size: 18px;
}

.noChoice {
  cursor: pointer;
  font-size: 18px;
}
</style>
